<template>
	<view class="page-view flex flex-direction" v-show="i === index">
		<view class="top-warp">
			<zx-nav title="订单管理"></zx-nav>
			<view class="searchBar">
				<!-- <view class="cu-bar search">
					<view class="search-form round">
						<text class="cuIcon-search"></text>
						<input type="text" class="flex-sub" placeholder="订单号/收货人/手机号/货位号" v-model="searchKeyword" confirm-type="search" @confirm="upload($event)" />
					</view>
				</view> -->
				<searchbar bg="#f2f3f7" searchplaceholder="订单号/收货人/手机号/货位号" :isSearch="true" @search="upload" v-model="searchKeyword"></searchbar>
			</view>
			<app-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></app-tabs>
			<div class="filterbar u-flex-y-center u-flex-between">
				<view class="filter-item u-flex-y-center" @tap="filterOrder(0)">
					<text :class="[{ 'u-primary': sortTime != '' }]">下单时间</text>
					<filterIcon :sort="sortTime"></filterIcon>
				</view>
				<view class="u-flex-y-center">
					<view :class="[{ 'u-primary': ps_status == 3 }]" @tap="filterOrder(1)">待配送</view>
					<view class="u-m-l-40" :class="[{ 'u-primary': ps_status == 1 }]" @tap="filterOrder(2)">已配送</view>
				</view>
			</div>
		</view>
		<view class="flex-sub main">
			<mescroll-uni ref="mescrollItem2" :fixed="false" :isSafearea="true" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @init="mescrollInit">
				<view class="list">
					<order-item v-for="(item, index) in orderlist" :key="index" :orderinfo="item" :orderIndex="index" @updateStatus="updateStatus"></order-item>
				</view>
			</mescroll-uni>
		</view>
		<view class="cu-tabbar-height"></view>
	</view>
</template>

<script>
import MescrollMoreItemMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js';
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import orderItem from './components/order-item.vue';
import AppTabs from '@/components/app-tabs.vue';
import filterIcon from '@/components/filter-icon.vue';
import searchbar from '@/components/searchbar';
export default {
	data() {
		return {
			downOption: {
				use: true,
				auto: false //是否在初始化后,自动执行下拉回调callback; 默认true
			},
			upOption: {
				auto: false,
				noMoreSize: 1,
				page: {
					num: 0,
					size: 10
				}
			},
			mescroll: null, //mescroll实例对象
			tabs: ['全部', '待发货', '待收货', '已完成'],
			tabIndex: 0,
			orderlist: [],
			topH: 175,
			orderStatus: '',
			searchKeyword: '',
			sortTime: '',
			ps_status: 0
		};
	},
	mixins: [MescrollMixin, MescrollMoreItemMixin],
	components: {
		orderItem,
		AppTabs,
		filterIcon,
		searchbar
	},
	created() {
		if (this.Custom) {
			this.topH = this.Custom.bottom + this.Custom.top - this.StatusBar + 180;
		}
	},
	methods: {
		tabChange() {
			var status = this.tabs[this.tabIndex];
			switch (status) {
				case '全部':
					this.orderStatus = '';
					break;
				case '待发货':
					this.orderStatus = '3,4';
					break;
				case '待收货':
					this.orderStatus = 5;
					break;
				case '已完成':
					this.orderStatus = 10;
					break;
			}
			this.orderlist = [];
			this.mescroll.scrollTo(0, 0);
			this.mescroll.resetUpScroll();
		},
		/*上拉加载的回调*/
		upCallback(mescroll) {
			this.getOrderlist();
		},
		getOrderlist() {
			let pageNum = this.mescroll.num; // 页码, 默认从1开始
			let pageSize = this.mescroll.size;
			let param = {
				page: pageNum,
				limit: pageSize,
				status: this.orderStatus
			};
			if (this.searchKeyword) {
				param.order_no = this.searchKeyword;
			}
			if (this.sortTime) {
				param.order_by = 'created_at';
				param.order_by_type = this.sortTime;
			}
			if (this.ps_status) {
				param.ps_status = this.ps_status;
			}
			this.$postAction(this.$api.getShopOrderList, param).then(da => {
				if (da.code == 0 && da.data && da.data.length > 0) {
					let curPageData = da.data;
					this.mescroll.endBySize(curPageData.length, da.count);
					if (pageNum == 1) {
						this.orderlist = [];
					}
					this.orderlist = this.orderlist.concat(curPageData); //追加新数据
				} else {
					this.orderlist = []; //如果是第一页需手动制空列表
					this.mescroll.endSuccess(0, false);
				}
			});
		},
		changeTab(index) {
			this.navIndex = index;
			this.orderStatus = this.tablist[this.navIndex].id;
			this.mescroll.resetUpScroll();
		},
		upload(searchKeyword) {
			this.searchKeyword = searchKeyword;
			this.mescroll.resetUpScroll();
		},
		//更新配送状态
		updateStatus(index) {
			let status = this.orderlist[index].order_ps_status;
			if (status == 1) {
				this.orderlist[index].order_ps_status = 2;
			} else {
				this.orderlist[index].order_ps_status = 1;
			}
		},
		filterOrder(type) {
			if (type == 0) {
				if (this.sortTime == 'desc') {
					this.sortTime = 'asc';
				} else if (this.sortTime == 'asc') {
					this.sortTime = '';
				} else {
					this.sortTime = 'desc';
				}
			} else if (type == 1) {
				this.ps_status = this.ps_status == 3 ? 0 : 3;
			} else if (type == 2) {
				this.ps_status = this.ps_status == 1 ? 0 : 1;
			}
			this.mescroll.resetUpScroll();
		}
	}
};
</script>

<style lang="scss">
.page-view {
	height: 100vh;
	width: 100%;
	overflow: hidden;
}

.top-warp {
	z-index: 9990;
	// position: fixed;
	// top: --window-top;
	/* css变量 */
	left: 0;
	width: 100%;
	background-color: white;
	.searchBar {
		padding: 0 15px;
	}
	.filterbar {
		padding: 20upx 38upx;
		font-size: 26upx;
		color: #aeaeb2;
	}
}
.main {
	overflow: auto;
	min-height: 0;
	margin-top: 20rpx;
}
.list {
}
</style>
